<%@ page import="com.MusicWeb.entity.User" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <title>音乐盒</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            text-decoration: none;
        }

        #Mood {
            width: 1000px;
            height: 600px;
            margin: 0 auto;
            /*overflow: scroll;*/
            overflow-y: auto;
            background-color: white;
            border: 3px solid #716e72;
            opacity: 0.9;
            border-radius: 0 0 15px 15px;
        }

        #MyCollection {
            width: 1000px;
            padding: 20px;
            text-align: center;
        }

        .music-th th {
            width: 50%;
            display: inline-block;
        }

        .music-th-id {
            text-align: center;
            width: 125px;
        }

        #MyCollection th {
            height: 40px;
            line-height: 40px;
            background-color: #beb8ca;
        }

        #MyCollection td {
            height: 30px;
            line-height: 30px;
        }

        #MyCollection a {
            color: black;
        }

        #MyCollection a:hover {
            text-decoration: underline;
            color: cornflowerblue;
        }

        tr:nth-child(even) {
            background: #dcdcdc;
        }

        tr:nth-child(odd) {
            background: #ffffff;

        }


    </style>
</head>
<%--通用代码，每个页面都引入--%>
<%@include file="../components/header.jsp"%>
<%@ include file="../components/base.jsp" %>
<body style="background-color: #cccccc">

<div id="Mood">

    <%
        User user = (User) request.getSession().getAttribute("user");
        Integer u_id = user.getId();
    %>

    <div>
        <h1 style="padding: 20px;">我收藏的音乐</h1>
        <input id="user" type="text" value="<%= u_id%>" style="display: none">

        <table id="MyCollection">

        </table>
    </div>
</div>

</body>
<script>

    // 显示歌曲

    var list = [];

    var userID = $('#user').val();

    function Collection() {
        $.ajax({
            type: "GET",
            url: `http://localhost:8080/collectionmusic?user_id=${userID}`,
            dataType: "json",
            success: function (res) {
                list = res;
                if (res != null) {
                    $(`#MyCollection`).html(`<tr>
                        <th class="music-th-id"></th>
                        <th class="music-th">标题</th>
                        <th class="music-th" onclick="">歌手</th>
                        <th class="music-th">操作</th>
                    </tr>`);
                    for (var i = 0; i < list.length; i++) {
                        $(`#MyCollection`).append(`<tr>
                            <td id="tdcolor" class="music-th-id">${i+1}</td>
                            <td id="tdcolor" class="music-th">
                                <a href="javascript:;" onclick="musicContent(${list[i].id})">${list[i].music_name}</a>
                            </td>
                            <td id="tdcolor" class="music-th">${list[i].music_singer}</td>
                            <td id="tdcolor" class="operation">
                                <a href="javascript:void(0);" onclick="delMusic(${list[i].id},${userID})"><span class="iconfont">&#xe66b;</span></a>
                            </td>
                            </tr>
                        `);
                    }

                }
            }
        })
    }

    Collection();


    //点击音乐跳转到音乐内容评论
    function musicContent(id, listid) {
        var i = id;
        <%--location.href='<%=request.getContextPath()%>/../musicDetails.jsp?id=${i}';--%>
        location.href = `<%=request.getContextPath()%>/FunctionPage/MusicReply.jsp?id=${i}`;
    }


    
    // 用户删除喜欢的音乐

    function delMusic(MuiscID,UserID) {
        $.ajax({
            type: "GET",
            url: `http://localhost:8080/CollectionDel?music_id=${MuiscID}&user_id=${userID}`,
            dataType: "text",
            success:function (res) {
                // alert("删除成功");
                console.log(res)
                if(res==1){
                    alert("移除歌曲成功！")
                    location.reload();
                }else {
                    alert("移除歌曲失败！")
                }

            }
        })
    }
    
</script>
</html>
